<script setup>
import { onBeforeMount, onMounted, reactive, ref } from "vue";
import {
  getAllEmission,
  getYears,
  getMap,
  getAllProvincePie,
  getDepartmentBar,
  getProvinceLine,
  getEmissionLine,
} from "../api/index.js";

import * as echarts from "echarts";
import { theme } from "../assets/js/theme.js";

import TimeSelectorView from "../components/TimeSelector.vue";
import MapView from "../components/Map.vue";
import AllProvincePie from "../components/AllProvincePie.vue";
import ProvinceLine from "../components/ProvinceLine.vue";
import DepartmentBar from "../components/DepartmentBar.vue";

let beginYear = ref("1997");
let endYear = ref("2019");
// let provinceId = ref(0);
// let provinceName = ref('全国');
let province = ref({
  provinceId: "0",
  name: "全国",
});

// TimeSelector
// let years = ref([]);
// let allEmission = ref([]);
// Map
let mapData = ref([]);
let emissionLineData = ref({});
// AllProvincePie
let pieData = ref([]);
// ProvinceLine
let lineData = ref({});
// DepartmentBar
let barData = ref({});

let yearChange = async (value) => {
  beginYear.value = value[0];
  endYear.value = value[1];
  await httpGetData(beginYear.value, endYear.value, province.value.provinceId);
};

let provinceChange = async (value) => {
  console.log("province: ", value);
  province.value = value;
  await httpGetData(beginYear.value, endYear.value, province.value.provinceId);
};

async function httpGetData(_beginYear, _endYear, _provinceId) {
  let param;
  let result;
  param = {
    params: {
      beginYear: _beginYear,
      endYear: _endYear,
    },
  };
  result = await getMap(param);
  let missingItem1 = { name: "西藏自治区", provinceId: "-1", value: "" };
  let missingItem2 = { name: "台湾省", provinceId: "-1", value: "" };
  result.splice(0, 0, missingItem1, missingItem2);
  mapData.value = result;

  result = await getAllProvincePie(param);
  pieData.value = result;

  param = {
    params: {
      beginYear: _beginYear,
      endYear: _endYear,
      provinceId: _provinceId,
    },
  };

  result = await getDepartmentBar(param);
  barData.value = result;

  result = await getProvinceLine(param);
  lineData.value = result;

  result = await getEmissionLine(param);
  emissionLineData.value = result;

  // console.log("years: ", years.value);
  // console.log("allEmission: ", allEmission.value);
  // console.log("mapData: ", mapData.value);
  // console.log("pieData: ", pieData.value);
  // console.log("barData: ", barData.value);
  // console.log("lineData: ", lineData.value);
  // console.log("emissionLineData: ", emissionLineData.value);
}

onBeforeMount(async () => {
  await httpGetData(beginYear.value, endYear.value, province.value.provinceId);
});

onMounted(() => {
  // let myChart = echarts.init(document.getElementById('homePage'), theme);
  // myChart.setOption({})
});
</script>

<template>
  <div id="homePage">
    <header>
      <h2>碳排放可视化</h2>
    </header>

    <!-- all components -->
    <section class="backContainer">
      <section class="leftModule">
        <!-- 时间选择器 -->

        <TimeSelectorView v-on:yearChange="yearChange" />

        <!-- 地图 -->
        <MapView
          @provinceChange="provinceChange"
          :mapData="mapData"
          :emissionLineData="emissionLineData"
        />

        <!-- 部门排放的条形图 -->
        <DepartmentBar :barData="barData" :province="province" />
      </section>

      <section class="rightModule">
        <!-- 30省的pie -->
        <AllProvincePie :pieData="pieData" />

        <!-- 折线图 -->
        <ProvinceLine :lineData="lineData" :province="province" />
      </section>
    </section>
  </div>
</template>

<style lang="less" scoped>
#homePage{
  width: 100%;
  height: 100%;
}

header {
  // border: 0.0625rem solid black;
  position: relative;
  z-index: 999;
  h2 {
    width: 2.5rem;
    height: 0.7rem;
    line-height: 0.7rem;
    font-size: 0.4rem;
    color: rgb(181, 114, 114);
    text-align: center;
    position: absolute;
    top: 100%;
    left: 49%;
  }
}

.backContainer {
  min-width: 1200;
  max-width: 2048;
  // border: 0.0625rem solid red;
  padding: 0.035rem 0.0313rem 0;
  display: flex;
  .leftModule {
    flex: 6;
  }
  .rightModule {
    flex: 5;
  }
}
</style>
